<!DOCTYPE HTML>
<html>
    <head>
        <title>CSS Regions: onkeydown events inside region</title>
        <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
        <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-19-2013 -->
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#relation-to-document-events">
        <meta name="assert" content="CSS regions module does not alter the normal processing of events in the document
         tree. Therefore, onkeydown events inside a named flow should be raised when any key is pressed.">
        <meta name="flags" content="dom interact">
        <link href="support/css/regions-keyboard.css" rel="stylesheet" type="text/css">
        <link href="/resources/testharness.css" rel="stylesheet" type="text/css">
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>
        <script src="support/js/regions-keyboard-events-test-helper.js"></script>
    </head>
    <body>
        <p id="msg">Press (and do not release) any alphanumeric key in the text field in the black square.</p>
        <div id="content">
            <div class="block"></div>
            <div class="block"></div>
            <div id="target-block" class="block">
                <form id="my-form">
                    <input type="text" id="textfield-inside" size="10">
                    <input type="button" id="button-inside" value="Button">
                </form>
            </div>
        </div>
        <div class="region"></div>
        <div class="region"></div>
        <div class="region"></div>
        <br/>
        <div id="outside-region">This div is outside the region
            <form id="form-outside">
                <input type="text" id="textfield-outside" size="10">
                <input type="button" id="button-outside" value="Button">
            </form>
        </div>
        <div id="log"></div>
    </body>
    <script type="text/javascript">
        if(getLeftPosition("target-block") !== 0) {

            var test1 = async_test("onkeydown event fired in textfield inside region", {timeout: testTimeout});
            test1.step(function () {
                var testTarget = document.getElementById("textfield-inside");
                testTarget.onkeydown = test1.step_func(function (evt) {

                    /* Verify the target inside the region has the correct ID */
                    test(function () {
                        assert_equals(evt.target.id, "textfield-inside");
                    }, "Target inside region has the correct ID");

                    test1.done();
                });
                keyDown("textfield-inside");
            });
            completionCallback();
        } //end of getLeftPosition test
        else {
            test(function () {
                assert_true(false);
            }, "Regions are not enabled");
        }
    </script>
</html>